<template>
  <div class="home">
    <section class="left">左侧导航区</section>
    <section class="right">
      <div class="con-left"><Item></Item></div>
      <div class="con-center">center</div>
      <div class="con-right">right</div>
    </section>

  </div>
</template>

<script>
import Item from '../compoments/ConItem.vue'
export default {
  name: 'Home',
  components: {
    Item
  }
}
</script>
<style lang="less">
  .home{
    display: flex;
    flex-direction: row;
    height: 100%;
    background:  url('../assets/img/device/bg.png') no-repeat;
    background-size: 100% 100%  ;
    .left{
      width: 10%;
      background: #112D3C url('../assets/img/device/nav-bg.png') no-repeat 0 0;
      background-size: contain;
      height: 100%;
      color:#fff;
      padding-top: 450px;
      box-sizing: border-box;
    }
    .right{
      display: flex;
      width:90%;
      height: 100%;
      .con-left{
        width: 28%;
        height: 100%;
        background-color: #fff;

      }
      .con-center{
        width: 44%;
        height: 100%;
      }
      .con-right{
        width: 28%;
        height: 100%;
        background-color: #fff;
      }
    }
  }
</style>
